<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子的阴影</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;

            /* box-shadow: 10px 10px; */
        }

        div:hover {
            box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);
        }

        /* 原先盒子没有影子,当我们鼠标经过盒子就添加阴影效果 */
    </style>
</head>
<body>
<!--
CSS3 中新增了盒子阴影，我们可以使用 box-shadow 属性为盒子添加阴影。
语法：
box-shadow: h-shadow v-shadow blur spread color inset;
注意：
1. 默认的是外阴影(outset), 但是不可以写这个单词,否则造成阴影无效
2.盒子阴影不占用空间，不会影响其他盒子排列。
值                               描述
h-shadow                    必需，水平阴影的位置，允许负值
v-shadow                    必需，垂直阴影的位置，允许负值
blur                        可选择，模糊距离
spread                      可选择，阴影的尺寸
color                       可选择，阴影的颜色
inset                       可选择，将外部阴影改为内部阴影
-->
<div></div>
</body>
</html>